<!-- 本页样式 -->
<style scoped>
.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}
</style>
<!-- 页面布局-->
<template>
  <div class="table">
    <!-- 标题导航栏 -->
    <div class="title-box crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-tickets"></i>基础数据管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>卡片版面管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 主体区 -->
    <div class="container">
      <!-- 查询条件 -->
      <div class="search-box">
        <div class="search-item-box">
          <table>
            <tr>
              <td>
                <i class="el-icon-search"></i>
              </td>
              <td class="search_td">
                <el-select
                  v-model="parampters.isp"
                  clearable
                  placeholder="运营商"
                >
                  <el-option
                    v-for="item in dicts.isp"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </td>
            </tr>
          </table>
        </div>
        <div class="search-button-box">
          <el-button
            type="primary"
            size="small"
            icon="search"
            @click="searchLoad"
            >查询</el-button
          >
          <el-button type icon="add" size="small" @click="toAdd"
            >新增</el-button
          >
          <el-button
            type
            size="small"
            icon="el-icon-download"
            @click="toExportExcel"
            >导出&nbsp;Excel</el-button
          >
        </div>
      </div>
      <!-- 查询条件END -->
      <!-- 数据列表 -->
      <div class="grid-data-box">
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          border
          :cell-class-name="changeColumnClass"
          :header-cell-style="{ background: '#F3F3F3', color: '#606266' }"
          show-overflow-tooltip
          style="width: 100%"
          ref="multipleTable"
          @row-dblclick="clickToView"
        >
          <el-table-column
            type="index"
            label="序号"
            width="50"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="faceName"
            label="卡片版面描述"
            width="300"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="图片名称" show-overflow-tooltip>
            <template slot-scope="scope">
              <div class="fxrow fxcc" style="justify-content: space-between">
                <el-popover placement="right" width="230" trigger="hover">
                  <img
                    :src="scope.row.filePath"
                    alt=""
                    style="width: 200px; height: auto"
                  />
                  <span
                    slot="reference"
                    style="color: #00978a; text-decoration: underline"
                    >{{ scope.row.fileName }}</span
                  >
                </el-popover>
                <a :href="scope.row.filePath" :download="scope.row.fileName">
                  <i
                    class="el-icon-download"
                    style="cursor: pointer; font-size: 14px"
                  ></i>
                </a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="isp"
            label="运营商"
            width="150"
            :formatter="formatter"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="操作" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button size="mini" @click="toUpd(scope.row)" type="primary"
                >修改</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="toDel(scope.row)"
                style="margin-left: 5px"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 数据列表END -->
      <!-- 翻页导航条 -->
      <div class="navigate-box">
        <div class="pagination">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :total="parampters.totalCount"
            @size-change="handleSizeChange"
            :current-page.sync="parampters.pageIndex"
            :page-sizes="[20, 50, 100, 200]"
            :page-size="parampters.pageRows"
            layout="total, sizes, prev, pager, next"
          ></el-pagination>
        </div>
      </div>
      <!-- 翻页导航条END -->
    </div>
    <!-- 主体区END -->
  </div>
</template>


<script>
import cardfaceupd from "./cardface_upd.vue";
export default {
  data() {
    return {
      // 筛选条件
      parampters: {
        //查询参数
        loginsid: "", //登录会话SID
        pageRows: 20, //每页行数
        pageIndex: 1, //当前页
        pageCount: 0, //总页数
        totalCount: 0, //总记录数
        isp: "", //运营商
      },
      // 查询出的表格数据
      tableLoading: true,
      tableData: [],
      //confirm提示信息弹框
      confirmBox: null,
      //所选记录id
      selectedId: "",
      //事物类型
      actType: "list",
      //字典集
      dicts: {},
    };
  },
  // 进入页面加载数据
  activated() {
    this.$set(this.parampters, "isp", "");
    this.handleInitLoad();
  },
  methods: {
    /**
     * 组件初始化加载
     */
    handleInitLoad() {
      this.initSelectOptoins();
      this.searchLoad();
    },

    /**
     * 初始加载字典选项
     */
    initSelectOptoins() {
      this.loadSelectOptoins("isp", null);
    },

    /**
     * 通用定义:下拉字典
     *  @augments dictKind 字典类型
     */
    loadSelectOptoins(dictKind, params) {
      let url = "/bill/dictionary/";
      this.$axios
        .get(url, {
          params: {
            type: dictKind,
          },
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          let data = res.data;
          if (data.success) {
            this.$set(this.dicts, dictKind, data.data.list);
          } else {
            console.log(data.message);
            // this.$error( "查询失败" + data.message );
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    changeColumnClass(data) {
      if (data.columnIndex == 1 || data.columnIndex == 2) {
        return "tabcolumn_left";
      }
    },

    /**
     * @augments  row 行所在的数据
     * 表格数据列 内容字典转换
     */
    formatter(row, column) {
      if (column.property == "isp") {
        return this.$dicts.transDict(this.dicts.isp, "code", "name", row.isp);
      }
    },

    /**
     * @augments val 页码
     * 切换页码操作
     */
    handleCurrentChange(val) {
      this.parampters.pageIndex = val;
      // 重新获取当前页码的数据
      this.searchLoad();
    },

    /**
     * @augments val 每页显示条数
     * 每页显示条数修改
     */
    handleSizeChange(val) {
      // 修改每页显示条数
      this.parampters.pageRows = val;
      // 重新获取数据
      this.searchLoad();
    },

    /**
     * 条件筛选查询,加载数据
     */
    searchLoad() {
      this.parampters = this.$util.trimObjStr(this.parampters);
      this.parampters.loginsid = this.$util.getLoginer().sessionId;
      this.tableLoading = true;
      this.$axios
        .get("/bill/cardFace/?" + new Date().getTime(), {
          params: this.parampters,
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          let data = res.data;
          if (data.success) {
            this.tableData = data.data.list;
            this.tableLoading = false;
            this.parampters.pageIndex =
              data.data.pageNum != undefined ? parseInt(data.data.pageNum) : 0;
            this.parampters.pageCount =
              data.data.totalPage != undefined
                ? parseInt(data.data.totalPage)
                : 0;
            this.parampters.totalCount =
              data.data.count != undefined ? parseInt(data.data.count) : 0;
          } else {
            this.tableLoading = false;
            this.$error(data.message);
          }
        })
        .catch((err) => {
          this.tableLoading = false;
          console.log(err);
        });
    },

    /**
     * 新增记录信息
     */
    toAdd() {
      //页面参数
      var pageParam = {
        loginInfo: this.$util.getLoginer(),
        actType: "add",
        seleid: "-1",
      };
      let commDialog = this.$dialog.commDialog(
        "添加卡片版面信息",
        cardfaceupd,
        pageParam,
        this.$util.setDialogWidth(),
        this.$util.setDialogHeight()
      );
      commDialog.exec.then((data) => {
        this.searchLoad();
      });
    },

    /**
     * 修改记录信息
     * @augments index 编辑数据所在的行索引
     * @augments row 编辑数据行的数据
     */
    toUpd(row) {
      this.selectedId = row.cardFaceId;
      //页面参数
      var pageParam = {
        actType: "upd",
        seleid: this.selectedId,
      };
      let commDialog = this.$dialog.commDialog(
        "编辑卡片版面信息",
        cardfaceupd,
        pageParam,
        this.$util.setDialogWidth(),
        this.$util.setDialogHeight()
      );
      commDialog.exec.then((resp) => {
        if (resp.type == "ok") {
          this.searchLoad();
        } else if (resp.type == "cancel") {
        }
      });
    },

    //
    clickToView(rowData, column, event) {
      this.toView(rowData);
    },

    /**
     * 查看记录信息
     * @augments row 编辑数据行的数据
     * @augments ev
     */
    toView(row) {
      this.selectedId = row.cardFaceId;
      //页面参数
      var pageParam = {
        actType: "view",
        seleid: this.selectedId,
      };
      let commDialog = this.$dialog.commDialog(
        "查看卡片版面信息",
        cardfaceupd,
        pageParam,
        this.$util.setDialogWidth(),
        this.$util.setDialogHeight()
      );
      commDialog.exec.then((data) => {});
    },

    /**
     * 删除记录信息
     * @augments index 所在表格行的索引
     * @augments row 所在表格行的所有数据对象
     */
    toDel(row) {
      this.selectedId = row.cardFaceId;
      this.confirmBox = this.$dialog.confirm("确定删除所选记录吗？");
      this.confirmBox.exec.then((btnName) => {
        if (btnName == "ok") {
          // 确定删除数据操作
          this.$axios
            .delete(
              "/bill/cardFace/" + this.selectedId + "/",
              {
                loginsid: this.$util.getLoginer().sessionId,
                userid: this.selectedId,
              },
              {
                headers: {
                  operator: this.$util.getLoginer().userid,
                  withCredentials: true,
                },
              }
            )
            .then((res) => {
              let data = res.data;
              if (data.success) {
                this.$dialog.close(this.confirmBox.vm);
                this.$message.success("删除成功");
                this.searchLoad();
              } else {
                this.$dialog.close(this.confirmBox.vm);
                this.$error(data.message);
              }
            })
            .catch((err) => {
              this.$dialog.close(this.confirmBox.vm); // 取消删除数据操作
            });
        } else {
          this.$dialog.close(this.confirmBox.vm); // 取消删除数据操作
        }
      });
    },
    toExportExcel() {
      this.$axios
        .get("/bill/cardFace/export/", {
          params: this.parampters,
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          let data = res.data;
          // 关闭提交表单的loading
          if (data.success) {
            let downloadUrl = data.data;
            let n = downloadUrl.split("/");
            var link = document.createElement("a");
            //设置下载的文件名
            link.download = n[n.length - 1];
            link.style.display = "none";
            //设置下载路径
            link.href = downloadUrl;
            //浏览器兼容，禁止打开新的页面
            link.target = "_self";
            //触发点击
            document.body.appendChild(link);
            link.click();
            //移除节点
            document.body.removeChild(link);
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
